import { defineComponent, reactive, watch } from "vue";
import styles from "./big-preview.module.less";
import { ZoomInOutlined, ZoomOutOutlined, RotateRightOutlined, CloseCircleFilled } from "@ant-design/icons-vue";
import _ from "lodash";
export default defineComponent({
  setup(props, { expose }) {
    const state = reactive({
      show: false,
      index: 0,
      urls: [],
      scaleSizeNum: 1,
      rotateDeg: 0,
    } as any)
    watch(() => state.show, (nv) => {
      if (!nv) {
        close();
      }
    }, {
      immediate: false,
      deep: true,
    })
    const listenMouseWheel = (e: any) => {
      if (e.deltaY > 0) {
        next();
      } else {
        prev();
      }
    }
    const open = (urls: any[], index: number = 0) => {
      state.urls = urls;
      state.index = index;
      state.show = true;
      document.addEventListener('mousewheel', listenMouseWheel);
    }
    const close = () => {
      state.index = 0;
      state.scaleSizeNum = 1;
      state.rotateDeg = 0;
      state.urls = [];
      document.removeEventListener('mousewheel', listenMouseWheel)
    }
    const next = () => {
      if (state.index >= state.urls.length - 1) {
        return;
      }
      state.index++;
    }
    const prev = () => {
      if (state.index <= 0) {
        return;
      }
      state.index--;
    }
    expose({
      open,
    })
    return () => (
      state.show && (
        <div class={styles['bigPreview-floating']}>
          <CloseCircleFilled class={styles.closeIcon} onClick={() => { state.show = false }} />
          <img
            class={styles['arrow-left']}
            src={require("@/assets/icon/arrow-left-grayback.png")}
            onClick={(e) => { e.stopPropagation(); prev() }}
            v-show={state.index > 0}
          />
          <div class={styles.container}>
            <div class={styles['preview-img']}>
              <div class={styles['preview-img-box']} style={{ zoom: state.scaleSizeNum, transform: `rotate(${state.rotateDeg}deg)` }}>
                <img
                  src={state.urls[state.index]?.img}
                  onClick={(e) => { e.stopPropagation() }}
                />
              </div>
              {
                state.urls[state.index]?.text && <span>{state.urls[state.index]?.text}</span>
              }
            </div>
            <div class={styles['control']} onClick={(e) => { e.stopPropagation() }}>
              <ZoomInOutlined
                class={styles['control-item']}
                onClick={(e) => { e.stopPropagation(); state.scaleSizeNum < 2 && (state.scaleSizeNum = state.scaleSizeNum + 0.2) }}
              ></ZoomInOutlined>
              <RotateRightOutlined
                class={styles['control-item']}
                onClick={(e) => { e.stopPropagation(); state.rotateDeg + 90 > 360 ? state.rotateDeg = state.rotateDeg + 90 - 360 : state.rotateDeg = state.rotateDeg + 90 }}
              ></RotateRightOutlined>
              <ZoomOutOutlined
                class={styles['control-item']}
                onClick={(e) => { e.stopPropagation(); state.scaleSizeNum > 1 && (state.scaleSizeNum = state.scaleSizeNum - 0.2) }}
              ></ZoomOutOutlined>
            </div>
          </div >
          <img
            class={styles['arrow-right']}
            src={require("@/assets/icon/arrow-left-grayback.png")}
            onClick={(e) => { e.stopPropagation(); next() }}
            v-show={state.index < state.urls.length - 1}
          />
        </div >
      )
    )
  }
})